<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>07_component_refs</title>
  </head>
  <body>
    <br />
    <div id="example"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
      /*
       需求: 自定义组件, 功能说明如下:
         1. 界面如果页面所示
         2. 点击按钮, 提示第一个输入框中的值
         3. 当第2个输入框失去焦点时, 提示这个输入框中的值
      */
      /*
           ref作用：
             1. 给普通元素绑定，获取到对应的真实DOM元素
             2. 给组件绑定，获取到对应的组件实例对象

             如果触发事件元素和要获取的DOM元素是同一个元素，可以用event.target获取
             如果触发事件元素和要获取的DOM元素不是同一个元素，可以用ref获取
         */

      class Test extends React.Component {
        render() {
          return <p>Test~~~</p>;
        }
      }

      class Form extends React.Component {
        // constructor() {
        //   super();

        //   // 初始化ref容器
        //   this.inputRef = React.createRef();
        //   console.log(this.inputRef); // { current: null }
        // }
        // 简写
        inputRef = React.createRef();
        compRef = React.createRef();

        handleClick = () => {
          console.log(this.compRef.current);
          alert(this.inputRef.current.value);
        };

        handleBlur = (event) => {
          alert(event.target.value);
        };

        render() {
          return (
            <div>
              {
                /* 注释~ */
                // 添加ref属性，值为ref容器，内部就会将input虚拟DOM对象生成的真实DOM元素自动挂载到ref容器上
              }
              <input type="text" ref={this.inputRef} />
              <button onClick={this.handleClick}>点击提示文字</button>
              <input
                onBlur={this.handleBlur}
                type="text"
                placeholder="失去焦点提示数据"
              />
              <Test ref={this.compRef} />
            </div>
          );
        }
      }

      ReactDOM.render(<Form />, document.getElementById("example"));
    </script>
  </body>
</html>
